聯系我們
導讀：這篇文章是之后WEB端系列設計規范的前言部分，目的是起到拋磚引玉的作用，簡述如何制作屬于“自己”的Web端設計規范。Web端設計規范的價值1.可復用性有了完整的設計規范和對應
發表日期：2019-12-03
文章編輯：興田科技
瀏覽次數：8894
標簽：
這篇文章是之后WEB端系列設計規范的前言部分，目的是起到拋磚引玉的作用，簡述如何制作屬于“自己”的Web端設計規范。
Web端設計規范的價值
1.可復用性
有了完整的設計規范和對應的組件控件。方便視覺和交互設計師反復復用，不需要重復制作，減少工作量提高工作效率。
2.統一性
有了統一的設計規范，設計師之間使用時，可避免自我創造組件控件，保持團隊產品的統一性體驗。
3.提升能力
由于組件控件的可復用，這直接使設計師的工作效率得到極大提高節省了大量時間，可以有大量時間思考設計和業務背后的邏輯從而提高設計思維能力。同時完整的設計規范是系統的，設計師閱讀之后可以構建自我的設計體系，對于設計的提高有極大的好處。
4.團隊文化沉淀
團隊有了設計規范之后，便于團隊以后做設計的依據和參考，不論是新員工的到來還是老員工的離去，都可以很好的對接工作提升團隊的協同效率。
Web端設計規范包含哪些
目前網上大部分設計規范都是之針對組件控件的規范，缺少完整的設計思想和體系化的內容。
在制定設計規范過程中會形成設計理念、設計原則、組件控件、界面交互和輸出文檔等。設計者可以依據自我的設計理念和原則按照功能需求直接調用規范中的標準控件，按照信息結構調用元素尺寸進行設計，很輕易便能輸出中高保真原型圖，減輕了設計過程中對交互控件選擇和信息排版思考的負擔。
不同的使用對象（B端、C端），不同的終端設備，設計的區別是完全不一樣的。所以設計理念也有所區別。
B端產品一般較定制化，以業務為導向。可能有很多高級功能，突出高效易用，導致易學性打折扣。
C端產品一般考慮絕大部分用戶使用場景和訴求，高級功能會相對少點。突出易學性。
所以在制定設計理念時，可根據團隊實際情況來設計制定。
Web端設計規范之設計原則篇
設計原則目前已經有很多，例如尼爾森的十大可用性原則、格式塔原則、剃刀法則、費茨定律、以及設計中常見的對比、對齊等，那么對于這么多原則如何變成一套自己的設計規范的設計原則篇呢？這個需要設計師們根據自身情況或者自身團隊實際情況去把控梳理。
Web端設計規范之組件控件篇
組件控件是整個設計規范的重要的內容之一，組件控件分類可以根據組件控件屬性進行分類，也可以根據組件控件的功能進行劃分。
按照設計師做設計的使用場景，還是按照組件控件的功能性進行劃分比較切合。
依據于功能劃分，例如表單類就可以劃分為：單文本輸入，多文本輸入、日歷時間選擇器、下拉選擇列表、單選多選等等
Web端設計規范之界面交互篇
移動端的觸發手勢有單擊、長按、左右滑動、拖拽、旋轉、夾捏等。相對于移動端，Web端的界面交互就很簡單了，基本就是懸浮和點擊。
界面交互的本質用一個公式可表述即：觸發對象+操作行為+交互結果=界面交互
Web端設計規范之團隊輸出物篇
作為一名交互設計師，我們的重點工作職責是起到承上啟下的作用。
比如對接上游的產品經理和項目經理，跟他們討論過產品規劃及需求后，他們會根據交互設計師輸出的交互文檔來評審設計方案是否滿足用戶需求，以及在開發實施過程中的可行性；
其次要對接下游的視覺設計師和開發工程師，他們會根據交互文檔中的線框圖、交互細節說明等來輸出視覺設計稿、用代碼實現交互設計方案，并以此為依據完成落地實現等工作。所以交互設計師重要的輸出物就是交互文檔，它是對接上下游的重要紐帶。
的交互文檔應該包含以下7點內容：完整的項目簡介、需求分析、新增修改紀錄、信息架構、交互設計的方案闡述、頁面交互流程圖（包含界面布局，操作手勢，反饋效果，元素的規則定義）、異常頁面和異常情況的說明。
作為視覺設計師而言，輸出物的是視覺稿、標注和切圖，這里不做贅述。
上一篇：
暫無信息上一篇：
網站內容不收錄，seoer該怎么做？更多新聞
2020
關于搜索引擎優化，現在的企業都要擁有自己的網站，因為他可以給給公司帶來方方面面的幫助。比如常規的官方網站，主要用來展示公司的一些相關信息。比如公
View details
2020
關于seo支持大量的新鮮內容，如果seo可以每天寫文章，并將文章提交給SEO，那么對于網站本身來說就更友好了，一切都沒有絕對的，SEO可以寫原創文章嗎？有時候seo并
View details
2020
關于seo，“熊掌號”seo的目標是通過seo技術為熊掌號主體帶來流量，將流量轉化為粉絲，將粉絲轉化為價值，不同的方法可以實現熊掌號運作的最終結果，只不過，這些
View details
2020
作為seoer假如你做的網站不被百度收錄，其中是有很多緣由的，那么做seo優化的話就要留意這些細節問題。 一、面包屑導航 它的作用并不像導航欄需求
View details
